<template>
  <template v-for="(item, index) in routeList" :key="index">
    <template v-if="!item.children && item.meta.visible">
      <el-menu-item :index="item.path" @click="goRoute">
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.meta.name }}</span>
        </template>
      </el-menu-item>
    </template>
    <template v-if="item.children && item.children.length == 1 && item.meta.visible">
      <el-menu-item :index="item.path" @click="goRoute">
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.meta.name }}</span>
        </template>
      </el-menu-item>
    </template>
    <template v-else-if="item.children && item.children.length > 1 && item.meta.visible">
      <el-sub-menu :index="item.path">
        <template #title>
          <el-icon><component :is="item.meta.icon"></component></el-icon>
          <span>{{ item.meta.name }}</span>
        </template>
        <Menu :routeList="item.children"></Menu>
      </el-sub-menu>
    </template>
  </template>
</template>
<script setup lang="ts">
import Menu from '@/components/Menu/index.vue'
import type { RouteRecordRaw } from 'vue-router'
import { useRouter } from 'vue-router'
defineProps({ routeList: { type: Array<RouteRecordRaw> } })
const $router = useRouter()
function goRoute(t: any) {
  console.log(t.index)
  // if (t.index == '/') {
  //   $router.push({ name: 'home' })
  //   return
  // } else
  $router.push(t.index)
}
</script>

<style lang="scss"></style>
